<template>
  <div :class="isIfm?'pr5':''">
    <Add ref="add" :formId="formId" @ok="searchView"></Add>
    <a-tabs
      v-model="viewId"
      type="editable-card"
      @edit="onEditView">
      <a-tab-pane
        v-for="obj in viewList"
        :tab="obj.name"
        :key="obj.id"
        :closable="obj.closable"></a-tab-pane>
    </a-tabs>
    <ZgEmpty
      :style="{height:`${winHeight-230}px`}"
      v-if="viewList.length===0"
      description="当前表单没有配置视图"></ZgEmpty>
    <Layout v-else :viewId="viewId" :formId="formId"></Layout>
  </div>
</template>
<script>
import Add from './Add'
import Layout from './Layout'
import { pageMixin } from '@/core/page-mixin'

export default {
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  mixins: [pageMixin],
  components: {
    Add, Layout
  },
  data () {
    return {
      pageCode: 'autoform-view',
      viewList: [],
      viewId: ''
    }
  },
  mounted () {
    const pageCode = 'autoform-view'
    this.SET_CONTEXT({
      flag: pageCode,
      form: [{ x: 1, y: 2 }]
    })
    this.$eventBus.$off('order')
    this.$eventBus.$on('order', (msg) => {
      if (msg.flag === pageCode) {
        alert(JSON.stringify(msg)) // 处理消息
      }
    })
    this.searchView()
  },
  watch: {
    formId () {
      this.searchView()
    }
  },
  methods: {
    searchView () {
      this.$http.get('/zg-autoform/zxb/view/list', { formId: this.formId }, data => {
        this.viewList = data.map(t => {
          t.closable = t.type === 'form'
          return t
        })
        if (data.length > 0) {
          this.viewId = data[0].id
        }
      })
    },
    onEditView (targetKey, action) {
      this[`${action}View`](targetKey)
    },
    addView () {
      this.$refs.add.open()
    },
    removeView (targetKey) {
       this.confirm(
        () => {
          this.$http.post('/zg-autoform/zxb/view/del', [targetKey], () => {
            this.searchView()
          })
        },
        '确定要删除这条数据么')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
